<template>
	<view>
		<!-- 选择时间 -->
		<tui-drawer mode="bottom" :maskZIndex="999990" :zIndex="999999" :visible="visible" @close="closeDrawer">
		 
				<view class="invite-container">
                    <view class="navTabBox">
                        <!-- 标题数量大于5 开启长导航栏模式 -->
                        <view class="longTab">
                            <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-into-view="toView">
                                <view
                                    :data-index="index"
                                    class="longItem"
                                    :style="index == tabClick ? `color:${textColor}` : 'color:#666666'"
                                    v-for="(item, index) in weekdays"
                                    :key="index"
                                    :id="'id' + index"
                                    @click="longClick(index)"
                                >
                                    <view style="position: relative;">
                                        <view class="titleTxt"><text :class="index == tabClick ? 'text-blod':''"   v-show="item.name">{{ item.name }}</text></view>
                                       
                                        <view v-if="index == tabClick" class="typeactivescrow" ></view> 
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <view >
                        <scroll-view scroll-y="true" scroll-x="false" > 
							<view class="content">
								<view @tap="clickTime(item,key)" :style="{backgroundColor: item.invited ? '':'#f3f3f3',color:item.invited ? '':'rgb(158 156 156 / 1)' }"  :class="tiomeCH(item.inviteTime) ? 'time-item clickTimes' :'time-item'" v-for="(item,key) in times" :key="key">
								   
								    <view style="text-align: center;"> {{ item.inviteTime }}</view>
								    <view  style="text-align: center;" v-if="item.invited">可预约</view>
								    <view  style="text-align: center;" v-else>不可预约</view>
								   
								</view>
							</view>
                        </scroll-view>
                    </view>
				</view>
		 
		</tui-drawer>
	</view>
</template>

<script>

import { getTutorTime} from '@/http/api/tutor/tutor.js'
	export default {
		name: 'TutorTime',
		emits: ['clear','confimInvite'],
		props: {
			visible:{
				type:Boolean,
				default:false
			},
            assistantId:{
				type:String,
				default:''
			},
		},
        data() {
			return {
				isAgreement:false,
                weekdays:[],
                keys:0,
                currentIndex:0,
                tabClick: 0, //导航栏被点击
                isCheckTimeindex:0,
                isLeft: 0, //导航栏下划线位置
                keyTime:{},
                toView: 'id0',
                week:{},
                times:[],
                textColor:'#000'
			};
		},
        watch:{
			visible:{
				handler(){ 
                  const weekdays=  ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
					const today = new Date();

                    const dates = Array.from({ length: 7 }, (_, i) => {
                    const date = new Date(today);
                    date.setDate(today.getDate() + i);
                    return date;
                    });

                    const formattedDates = dates.map(date => {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始需+1
                        const day = String(date.getDate()).padStart(2, '0');
                        const weekday = weekdays[date.getDay()]; // 根据 getDay() 获取中文星期
                        
                        return  {
                            name:`${month}-${day} ${weekday}`,
                            time:`${year}-${month}-${day}`,
                            id:Date.now()
                        }
                    });
					this.week=formattedDates[0].time
                    this.getTime(formattedDates[0].time,0)
                    this.weekdays=formattedDates
                    console.log(formattedDates,'formattedDates') 
				},
				deep:true,
				immediate:false
			},
			keys:{
				handler(){ 
                   
				},
				deep:true,
				immediate:false
			},
		}, 
		computed:{
			 
		},
		methods: {   
            getTime(time,index){
                this.isCheckTimeindex=index
                getTutorTime(this.assistantId,{
                    date:time
                }).then(res=>{
                    if(res.code==200){
                        this.times = res.data.map(item => {
							// 将 inviteTime 转换为 Date 对象
							const inviteDateTime = new Date(`${time}T${item.inviteTime}:00`);
							const currentDateTime = new Date();

							// 比较时间
							if (inviteDateTime < currentDateTime) {
								return {
									...item,
									invited: false
								};
							}
							return item;
						});
                    }else{
                        this.times=[]
                    }
                    console.log('教练可预约时间',res)
                })
                .catch(err=>{
                    this.times=[]
                })
            },
            longClick(index) {
                var tempIndex = index - 2;
                tempIndex = tempIndex <= 0 ? 0 : tempIndex;
                this.toView = `id${tempIndex}`; //动画滚动,滚动至中心位置
                this.tabClick = index; //设置导航点击了哪一个   
                this.getTime(this.weekdays[index].time,index)
            },
            tiomeCH(time){
                if((this.keyTime.dete===this.weekdays[this.tabClick].name)&&(this.keyTime.time===time)){
                    return true
                }
                return false
            },
			clickTime(item,key){
                if(!item.invited) return false
				this.keys=key
                this.keyTime={
                    dete:this.weekdays[this.tabClick].name,
                    time:item.inviteTime
                }
                this.closeDrawer()
				console.log(item,key,'点击')
			},
            closeDrawer(){
                this.$emit('clear',this.keyTime)
            }
		}
	};
</script>

<style lang="scss" scoped>
	 .invite-container{
		padding: 0 10rpx 8rpx 10rpx;
		padding-bottom: 60rpx;
        height: 400rpx;
    }
    .typeactivescrow{
	display: block; 
	position: absolute;
	/* 将半圆放置在文本下方 */
	 margin-top: -2px;
	 margin-left: calc(50% - 40rpx);
     background-color: rgb(13, 184, 84);
	/* 完全居中 */
	width:80rpx;
	/* 半圆的宽度 */
	height: 8rpx;
}
.typeactivescrow5{
	display: block; 
	position: absolute;
	/* 将半圆放置在文本下方 */
	 margin-top: 5px;
	 margin-left: calc(50% - 20rpx);
	/* 完全居中 */
	width: 40rpx;
	/* 半圆的宽度 */
	height: 16rpx;
}
.text-blod{ 
	color: rgb(13, 184, 84);;
}
.navTabBox {
	width: 100vw;
	color: #000;
	.longTab {
		width: 100%; 
		.longItem {
			width: 200rpx;
			height:80rpx;
			display: inline-block;
		    line-height: 80rpx;
			text-align: center;
		}
		.underlineBox {
			height: 5rpx;
			width: 20%;
			display: flex;
			align-content: center;
			flex-direction: row;
			justify-content: center;
			font-size: 24rpx;
			transition: 0.5s;
		}
	}
	.shortTab {
		width: 100%;
		.navTab {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 90rpx;
			position: relative;
			.navTabItem {
				display: flex;
				align-items: center;
				color: #949496;
				justify-content: center;
				width: 100%;
				font-size: 28rpx;
			}
		}
		.underlineBox {
			height: 5rpx;
			display: flex;
			align-content: center;
			justify-content: center;
			flex-direction: row;
			transition: 0.5s;
		}
	}
}
.content{ 
    max-height: 300rpx; 
    width: 100%;
    display: flex; 
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 20rpx; 
    margin-left: 20rpx; 
}
.time-item{ 
    // padding: 10rpx 20rpx;
	width: 160rpx;
	height: 80rpx;
    font-size: 24rpx;
    margin: 10rpx 10rpx 0rpx 0rpx; 
	display: flex;
	align-items: center;
   justify-content: center;
   flex-direction: column;
    color: #000;
    background-color: #fff;
	border-radius: 10rpx;
    border: 2rpx solid #949496;
 
}
.clickTimes{
    color: #fff;
    background-color: rgb(13, 184, 84);
    border: 2rpx solid rgb(13, 184, 84);
}
</style>